<template>
  <div id="app">
    <reactive-base
      app="good-books-ds"
      url="https://a03a1cb71321:75b6603d-9456-4a5a-af6b-a487b309eb61@appbase-demo-ansible-abxiydt-arc.searchbase.io"
    ><div class="row">
      <div class="col">
        <state-provider>
          <template #default="{ setSearchState }">
            <button @click="() => setSearchState(savedState)">Replay Search</button>
          </template>
        </state-provider>
        <div>
          <multi-list
            :show-count="true"
            :urlparams="true"
            component-id="Authors"
            data-field="authors.keyword"
            class-name="multi-list-container"
          />
        </div>
        <single-range
          :data="[
            { start: 0, end: 3, label: 'Rating < 3' },
            { start: 3, end: 4, label: 'Rating 3 to 4' },
            { start: 4, end: 5, label: 'Rating > 4' },
          ]"
          :urlparams="true"
          component-id="Ratings"
          data-field="average_rating"
          title="Filter Ratings"
          class="ratings-container"
        />
      </div>
      <div class="col">
        <reactive-list
          :pagination="true"
          :from="0"
          :size="5"
          :react="{ and: ['Ratings', 'Authors'] }"
          :urlparams="true"
          component-id="SearchResult"
          data-field="original_title.keyword"
          class-name="result-list-container"
        >
          <template #renderItem="{ item }">
            <div 
              :id="item._id" 
              :key="item._id" 
              class="flex book-content">
              <img 
                :src="item.image" 
                alt="Book Cover" 
                class="book-image" >
              <div class="flex column justify-center ml20">
                <div class="book-header">{{ item.original_title }}</div>
                <div class="flex column justify-space-between">
                  <div>
                    <div>
                      by <span class="authors-list">{{ item.authors }}</span>
                    </div>
                    <div class="ratings-list flex align-center">
                      <span class="stars">
                        <i
                          v-for="(item, index) in Array(
                            item.average_rating_rounded,
                          ).fill('x')"
                          :key="index"
                          class="fas fa-star"
                        />
                      </span>
                      <span 
                        class="avg-rating"
                      >({{ item.average_rating }} avg)</span
                      >
                    </div>
                  </div>
                  <span 
                    class="pub-year"
                  >Pub {{ item.original_publication_year }}</span
                  >
                </div>
              </div>
            </div>
          </template>
        </reactive-list>
      </div>
    </div>
    </reactive-base>
  </div>
</template>

<script>
import {
	StateProvider,
	ReactiveBase,
	ReactiveList,
	SingleRange,
	MultiList,
} from '@appbaseio/reactivesearch-vue';
import './styles.css';

export default {
	name: 'App',
	components: {
		ReactiveBase,
		StateProvider,
		ReactiveList,
		SingleRange,
		MultiList,
	},
	data() {
		return {
			savedState: {
				Authors: ['Meg Cabot', 'King Dean'],
				Ratings: { start: 4, label: 'Rating > 4' },
			},
		};
	},
};
</script>

<style>
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: #2c3e50;
}
</style>
